<template>
	<view class="userItem" @click="skipUserInfo(userObj.userId)">
		<!-- 用户头像 -->
		<van-image width="130rpx" height="130rpx" fit="cover" round
			:src="userObj.avatar ? userObj.avatar : '/static/images/userHeaderDefault.jpg'" use-loading-slot lazy-load>
		</van-image>
		<!-- 头像，性别，个人签名，粉丝数，阅读量区域 -->
		<view class="userItemContent">
			<view class="userItemContentNameBox">
				<!-- 用户名称 -->
				<text class="userItemContentName">{{userObj.userName}}</text>
				<!-- 用户性别 -->
				<image style="width: 30rpx;height: 30rpx;"
					:src="userObj.sex == 0 ? '../../static/images/nosex.svg' : userObj.sex == 1 ? '../../static/images/woman.svg' : '../../static/images/man.svg'">
				</image>
			</view>
			<!-- 类型为0的时候显示个人签名 -->
			<text class="userItemContentSignatureText" v-if="type === 0">{{userObj.signature}}</text>
			<!-- 类型为1的时候显示阅读量和粉丝数 -->
			<view class="userItemContentText" v-else-if="type === 1">
				<text>阅读量: {{userObj.readNum | NumMet}}</text>
				<text style="margin-left: 10upx;">粉丝数: {{userObj.fansNum | NumMet}}</text>
			</view>
			<!-- 类型为2的时候展示ID和活跃用户 -->
			<block v-else-if="type === 2">
				<text class="userItemId">ID：{{userObj.id}}</text>
				<view class="activeUser">
					活跃用户
				</view>
			</block>
			<!-- 类型为3的时候显示粉丝数和个性签名 -->
			<block v-else-if="type === 3">
				<text class="userItemId">粉丝数：{{userObj.fansNum | NumMet}}</text>
				<text class="userItemContentSignatureText">{{userObj.signature}}</text>
			</block>
		</view>
		<!-- 关注取关 -->
		<view class="userItemRight">
			<view v-if="userObj.fansState && userObj.mutualConcern" class="userItemRightAttention attentionTrue"
				@click.stop="attentionHandle(userObj.userId,userObj.fansState)">
				<text>互相关注</text>
			</view>
			<view v-else-if="userObj.fansState && !userObje.mutualConcern" class="userItemRightAttention attentionTrue"
				@click.stop="attentionHandle(userObj.userId,userObj.fansState)">
				<text>已关注</text>
			</view>
			<view v-else class="userItemRightAttention attentionFalse"
				@click.stop="attentionHandle(userObj.userId,userObj.fansState)">
				<text>{{attentionText}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		// 需要传递的两个参数,一个当前用户对象,一个是类型
		props: {
			userObj: {
				type: Object,
				default: {}
			},
			type: {
				type: Number,
				default: 0
			},
			attentionText: {
				type: String,
				default: "关注"
			}
		},
		name: "user-item",
		data() {
			return {
				// 初始状态
				initFansState: false,
				// 是否在点击
				clickState: false
			};
		},
		methods: {
			// 跳转到用户信息界面
			skipUserInfo(id) {
				if (this.type === 1) return
				uni.navigateTo({
					url: `../../subpkg/user-info/user-info?id=${id}`
				})
			},
			// 点击关注图标
			async attentionHandle(id, fansState) {
				if (!fansState === false) {
					uni.showModal({
						title: '是否取关该用户？',
						success: async (res) => {
							if (res.confirm) {
								const {
									data: result
								} = await uni.$http.delete("/ym_server/fans/", {
									answerUserId: id,
									source: 'myFans'
								})
								this.$emit("changeUserFansState", id, fansState)
							}
						}
					})
				} else {
					const {
						data: result
					} = await uni.$http.post("/ym_server/fans/", {
						answerUserId: id,
						source: 'myFans'
					})
					this.$emit("changeUserFansState", id, fansState)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.userItem {
		height: 130upx;
		justify-content: space-around;
		display: flex;
		align-items: center;

		// 用户信息
		.userItemContent {
			width: 52%;
			height: 130upx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.userItemContentNameBox {
				display: flex;
				align-items: center;
				width: 100%;
				justify-content: flex-start;

				.userItemContentName {
					font-size: 32upx;
					max-width: 80%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-right: 20upx;
				}
			}

			.userItemContentSignatureText {
				font-size: 24upx;
				color: #666666;
				max-width: 100%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.userItemContentText {
				display: flex;
				justify-content: flex-start;
				font-size: 24upx;
				color: #666666;
				max-width: 100%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.userItemId {
				color: #666666;
				font-size: 26upx;
			}

			.activeUser {
				height: 28upx;
				width: 38%;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1px solid #EB4C39;
				font-size: 22upx;
				color: #EB4C39;
			}
		}

		// 关注取关
		.userItemRight {
			width: 144upx;
			
			.userItemRightAttention {
				display: flex;
				height: 60upx;
				border-radius: 60upx;
				font-size: 26upx;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;

				.icon {
					transform: translateY(-3rpx);
				}

				text {
					font-size: 24upx;
				}
			}

			.attentionTrue {
				color: #666;
				border: 2upx solid #666;
			}

			.attentionFalse {
				color: #ffffff;
				background: #3FD3D1;
			}
		}
	}
</style>
